<template>
  <div class="position">

    <!--S主体-->
    <cube-scroll ref="scroll" :style="{height:page_height+'px'}">
      <ul id="ul">
        <li v-for="(item,index) in list" @click="clickLi(index)">{{item.name}}</li>
      </ul>
    </cube-scroll>
    <!--E主体-->

    <!--S底部添加职位按钮-->
    <div id="bottom" ref="bottom">
      <cube-button :primary="true" @click="showAddEdit('add')"><i class="iconfont icontianjia"></i>添加职位</cube-button>
    </div>
    <!--E底部添加职位按钮-->

    <!--S添加修改职位区域-->
    <div id="edit" v-if="show" :class="show_class">
      <cube-scroll ref="editScroll">
        <cube-form ref="form" id="form" :model="form_data" :schema="form" @submit.prevent="submit(form_data)"></cube-form>
      </cube-scroll>
    </div>
    <!--E添加修改职位区域-->

  </div>
</template>

<script>
import store from '../../store.js';
import common from '../../public/common.js';
export default {
  name: 'position',   //职位管理
  data(){
    var self = this;
    return {
      page_height:store.state.height,
      store_id:0,  //门店id
      list:[], //职位列表
      list_index:0, //选择操作职位的列表下标
      //S添加修改职位
      show:false,
      show_class:'animated slideInUp faster',
      doing:'add',  //修改或者添加职位 add||edit
      position_id:0,  //职位id
      form_data:{
        name:'',
        authority:[]
      },
      form:{
        fields:[
          {
            label:'职位名称',
            type:'input',
            modelKey:'name',
            props: {
              placeholder: '职位名称'
            },
            rules:{
              required:true,
              max:5
            },
            events:{
              blur(){
                window.scroll(0,0);
              }
            }
          },
          {
            label:'权限',
            type:'checker',
            modelKey:'authority',
            props: {
              options:store.state.authority
            },
            rules:{
              required:true
            }
          },
          {
            type: 'submit',
            label: '新增职位',
            props:{
              primary:true
            }
          },
          {
            type: 'button',
            label: '关闭',
            events:{
              click(){
                self.show_class = 'animated slideOutDown faster';
                setTimeout(()=>{
                  self.show = false;
                },300);
              }
            }
          }
        ]
      }
      //E添加修改职位
    }
  },
  created(){
    common.store()
            .then(res=>{
              if(store.state.store.position_id != 0){
                if(!store.state.store.authority.includes('staff')){
                  this.$router.replace('/');
                  return;
                }
              }
              if(res){
                this.store_id = res.store_id;
              }
            })
            .then(()=>{
              this.getList();
            })
            .catch(error=>console.log(error));
  },
  mounted(){
    this.$nextTick(()=>{
      setTimeout(()=>{
        this.page_height = document.documentElement.clientHeight;
      },100);
    });
  },
  methods:{
    //获取门店所有职位
    getList(){
      this.$http.post(sysinfo.url,Qs.stringify({
        pages:'storePosition',
        doing:'li',
        store_id:this.store_id
      }))
              .then((res)=>{
                if(res.data.status == 'success'){
                  this.list = res.data.data;
                }else{
                  this.list = [];
                }
              })
              .catch(error=>console.log(error));
    },
    //提交,添加或者修改职位
    submit(data){
      if(this.doing == 'add') data.store_id = this.store_id;
      var send_data = {
        pages:'storePosition',
        doing:this.doing,
        data
      }
      if(this.doing == 'edit'){
        send_data.position_id = this.position_id;
      }
      this.$http.post(sysinfo.url,Qs.stringify(send_data))
              .then((res)=>{
                if(res.data.status == 'success'){
                  this.$createToast({
                    txt: this.doing == 'add' ? '新增成功' : '修改成功',
                    type: 'txt'
                  }).show();
                  if(this.doing == 'add'){
                    this.doing = 'edit';
                    this.position_id = res.data.data;
                    this.form.fields[2].label = '修改职位';
                  }
                  this.getList();
                }else{
                  this.$createToast({
                    txt: '修改失败',
                    type: 'txt'
                  }).show();
                }
              })
              .catch(error=>console.log(error));
    },
    //点击添加职位限制添加职位区域
    showAddEdit(doing){
      this.show=true;
      this.show_class='animated slideInUp faster';
      this.doing = doing;
      this.form.fields[2].label = doing == 'add' ? '新增职位' : '修改职位';
      if(doing == 'edit'){
        this.form_data = {name:this.list[this.list_index].name,authority:this.list[this.list_index].authority}
      }else{
        this.form_data = {name:'',authority:[]}
      }
    },
    //删除职位
    deletePosition(){
      this.$createDialog({
        type: 'confirm',
        content: '关联职员也将被删除，确定要删除该职位吗？',
        icon: 'cubeic-alert',
        onConfirm:()=>{
          this.$http.post(sysinfo.url,Qs.stringify({
            pages:'storePosition',
            doing:'delete',
            position_id:this.position_id
          }))
                  .then((res)=>{
                    if(res.data.status == 'success'){
                      this.getList();
                    }else{
                      this.$createToast({
                        txt: '删除失败',
                        type: 'txt'
                      }).show();
                    }
                  })
                  .catch(error=>console.log(error));
        }
      }).show();
    },
    //点击li
    clickLi(_index){
      this.list_index = _index;
      this.position_id = this.list[_index].id;
      this.$createActionSheet({
        title: '操作',
        active: 1,
        data: [
          {
            content: '修改',
            value:'edit'
          },
          {
            content: '删除',
            value:'delete'
          },
        ],
        onSelect:(item)=>{
          switch(item.value){
            case 'edit':
              this.showAddEdit('edit');
              break;
            case 'delete':
              this.deletePosition();
              break;
          }
        }
      }).show();
    }
  }
}
</script>

<style scoped>
  .position{
    padding-bottom:50px;
    box-sizing: border-box;
  }
  #ul{
    padding: 0 10px;
  }
  #ul li{
    display: inline-block;
    padding:3px 10px;
    border:1px solid #FC9153;
    margin: 10px 10px 0 0;
    border-radius: 15px;
    font-size:16px;
    color:#666;
  }
 #bottom{
   position: fixed;
   z-index: 10;
   bottom:0;
   width: 100%;
   height:50px;
 }
  #edit{
    position:absolute;
    z-index:20;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background: #fff;
    padding:10px 10px 0 10px;
  }
</style>

<style lang="stylus" rel="stylesheet/stylus">
  .cube-form
    background: none;
  .cube-checker-item
    margin-bottom: 3px;
    margin-top:3px;
</style>